import React, { Component } from 'react'
import { render } from 'react-dom'
import 'static/less/app'

class ActivityDeadline extends Component {
  constructor() {
    super()
    this.countDown = this.countDown.bind(this)
    this.state = {
      arr: this.diffInterval(),
    }
  }
  componentDidMount() {
    this.timer = setInterval(() => {
      this.countDown()
    }, 1000)
  }
  componentWillUnmount() {
    clearInterval(this.timer)
  }
  render() {
    const { arr } = this.state
    let [one, two, three, four] = arr
    const oneArr = this.process(one)
    const twoArr = this.process(two)
    const threeArr = this.process(three)
    const fourArr = this.process(four)
    return (
      <div className={`rt-right-box`}>
        距活动开始还有
        <span>{oneArr[0]}</span>
        <span>{oneArr[1]}</span>
        天
        <span>{twoArr[0]}</span>
        <span>{twoArr[1]}</span>
        时
        <span>{threeArr[0]}</span>
        <span>{threeArr[1]}</span>
        分
        <span>{fourArr[0]}</span>
        <span>{fourArr[1]}</span>
      </div>
    )
  }
  process(number) {
    if (number < 10) return [0, number]
    if (number > 99) return [0, 0]
    if (number > 9) {
      const remainder = number % 10
      return [(number - remainder) / 10, remainder]
    }
  }
  countDown() {
    const arr = this.diffInterval()
    this.setState({arr})
  }
  diffInterval() {
    var startAt = new Date
    var endAt = new Date('2016-12-12 00:00:00')
    // 时间差的毫秒数
    var delta = endAt.getTime() - startAt.getTime()
    // 计算出相差天数
    var days = Math.floor(delta / (24 * 3600 * 1000))

    var leave1 = delta % (24 * 3600 * 1000)
    var hours = Math.floor(leave1 / (3600 * 1000))

    var leave2 = leave1 % (3600 * 1000)
    var minutes = Math.floor(leave2 / (60 * 1000))
    //计算相差秒数
    var leave3 = leave2 % (60 * 1000)
    var seconds = Math.round(leave3 / 1000)

    return [days, hours, minutes, seconds]
  }
}

class App extends Component {
  constructor() {
    super()
    this.state = {
      // from left to right index [from 0]
      activeNav: 2,
    }
  }
  render() {
    const { activeNav } = this.state
    return (
      <div className={`rt-app-container`}>
        <div className={`rt-header-nav-box`}>
          <div className={`rt-left-box`}>
            <span
              className={`${activeNav === 0 ? 'rt-active-nav-box' : ''}`}
              onClick={() => {
                if (activeNav === 0) return
                this.setState({
                  activeNav: 0,
                })
              }}
            >
              <a className={`rt-first-a`}>首页</a>
            </span>
            <span
              className={`${activeNav === 1 ? 'rt-active-nav-box' : ''}`}
              onClick={() => {
                if (activeNav === 1) return
                this.setState({
                  activeNav: 1,
                })
              }}
            >
              <a>全部分类</a>
            </span>
            <span
              className={`${activeNav === 2 ? 'rt-active-nav-box' : ''}`}
              onClick={() => {
                if (activeNav === 2) return
                this.setState({
                  activeNav: 2,
                })
              }}
            >
              <a>跨店3免1</a>
            </span>
            <span
              className={`${activeNav === 3 ? 'rt-active-nav-box' : ''}`}
              onClick={() => {
                if (activeNav === 3) return
                this.setState({
                  activeNav: 3,
                })
              }}
            >
              <a>拉杆箱</a>
            </span>
            <span
              className={`${activeNav === 4 ? 'rt-active-nav-box' : ''}`}
              onClick={() => {
                if (activeNav === 4) return
                this.setState({
                  activeNav: 4,
                })
              }}
            >
              <a>电脑包</a>
            </span>
          </div>
          <ActivityDeadline />
        </div>
      </div>
    )
  }
}

render(
  <App />,
  document.getElementById('app')
)